{% extends 'base.html' %}

{% block title %}{{ article.title }}{% endblock %}
<style>
   #header-inner .d1{
   margin-left:auto;
   }

</style>

{% block left %}
    <div id="main">
        <div class="container">
            <section class="article-detail"  style="margin-bottom:15px;">
                <h1 style="text-align:center; font-weight: bold;">{{ article.title }}</h1>
                <p class="meta">
                    作者: {{ article.author }} · 创建时间: {{ article.create_time }} · 修改时间: {{ article.update_time }}
                </p>
                <p>{{ article.content|truncatewords:50 }}</p>
                <div class="entry-meta">
                        <span class="article.category"><a href="#">{{ article.category.name }}</a></span>
                </div>
                <a href="{% url 'index' %}" style="display: block; text-align: center;">返回首页</a>
            </section>
            <h1>评论 - {{ article.title }}</h1>
            <div style="border: 1px solid #ccc; padding: 10px; margin-bottom:15px;">
                <form method="post" action="{% url 'comment' article.id %}">
                    {% csrf_token %}
                    <label for="name">姓名:</label><br>
                    <input type="text" id="name" name="name" required><br>
                    <label for="email">邮箱:</label><br>
                    <input type="email" id="email" name="email" required><br>
                    <label for="content">评论内容:</label><br>
                    <textarea id="content" name="content" rows="4" cols="50" required></textarea><br>
                    <button type="submit">提交评论</button>
                </form>

                {% if messages %}
                    {% for message in messages %}
                        <div class="alert alert-{{ message.tags }}">
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}
            </div>
            <h3>评论列表 (共 {{ comments|length }} 条评论) {{ comment }}</h3>
            <form method="get" action="">
                    <label for="sort_by">排序方式:</label>
                    <select name="sort_by" id="sort_by" onchange="this.form.submit()">
                        <option value="time_desc" {% if sort_by == 'time_desc' %}selected{% endif %}>按时间倒序</option>
                        <option value="one_day" {% if sort_by == 'one_day' %}selected{% endif %}>一天内</option>
                        <option value="one_week" {% if sort_by == 'one_week' %}selected{% endif %}>一周内</option>
                        <option value="author" {% if sort_by == 'author' %}selected{% endif %}>按作者</option>
                    </select>
            </form>
            {% for comment in comments %}
                <div class="comment">
                    <p><strong>{{ comment.name }} ({{ comment.created_at }})</strong></p>
                    <p>{{ comment.content }}</p>
                     <div class="like-section">
                        <button class="like-button" data-comment-id="{{ comment.id }}">点赞</button>
                         <small>点赞数: {{ comment.like_count }}</small>
                     </div>
                    <div>
                        <button class="reply-button" data-comment-id="{{ comment.id }}">回复</button>
                        <form method="post" action="{% url 'reply_comment' article.id comment.id %}">
                            {% csrf_token %}


                            <textarea id="reply_content" name="content" rows="2" cols="50" required></textarea><br>
                            <button type="submit">提交回复</button>
                        </form>
                    </div>
                </div>
            {% endfor %}
            {% block scripts %}
                <script>        document.addEventListener('DOMContentLoaded', function() {
                        const likeButtons = document.querySelectorAll('.like-button');
                        likeButtons.forEach(button => {
                            button.addEventListener('click', function(event) {
                                event.preventDefault();
                                const commentId = this.getAttribute('data-comment-id');
                                fetch(`{% url 'like_comment' %}`, {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRFToken': '{{ csrf_token }}'
                                    },
                                    body: JSON.stringify({ comment_id: commentId })
                                })
                                .then(response => response.json())
                                .then(data => {
                                    if (data.success) {
                                        const likeCountSpan = this.nextElementSibling;
                                        likeCountSpan.textContent = `(${data.like_count})`;
                                    } else {
                                        alert('点赞失败，请稍后再试。');
                                    }
                                })
                                .catch(error => {
                                    console.error('Error:', error);
                                });
                            });
                        });
                    });
                </script>
            {% endblock %}
        </div>
    </div>

{% endblock %}
